<template>
  <div class="bookingCard bg_w border_r8" @click="checkDetails(bookingData.id)">
    <div class="cardTop flex_r_sb_c">
      <div class="flex_r_fs_c">
        <van-image class="cardImg border_r4 margin_r16" width="3.2rem" height="3.2rem" fit="cover" :src="bookingData.image">
          <template v-slot:loading>
            <van-loading type="spinner" size="2rem" />
          </template>
        </van-image>
        <span class="topName f_16 fw_700 text_line_1" v-text="bookingData.name"></span>
      </div>
      <span v-if="bookingData.status === 0" class="audit">审核中</span>
      <span v-if="bookingData.status === 1" class="approved">已通过</span>
      <span v-if="bookingData.status === 0 || bookingData.status === 1" class="cancelBtn f_12 tc_g border_r4" @click.stop="cancelBooking(bookingData.id)">取消预约</span>
      <span v-else-if="bookingData.status === 2" class="doneText f_12 tc_8">已完成</span>
      <span v-else class="cancelText f_12 tc_r">已取消</span>
    </div>
    <div class="cardBottom f_14">
      <div class="cardTime margin_b16 flex_r_fs_fs">
        <div class="margin_r20 tc_8">预约时间</div>
        <div class="timeContent tc_1" v-text="bookingData.bookingTime"></div>
      </div>
      <div class="cardService margin_b16 flex_r_fs_fs">
        <div class="margin_r20 tc_8">来访需求</div>
        <div class="timeContent tc_1" v-text="bookingData.server"></div>
      </div>
      <div class="cardAddress margin_b16 flex_r_fs_fs">
        <div class="margin_r20 tc_8" style="white-space: nowrap">参观地址</div>
        <div class="timeContent tc_1 line_h" v-text="bookingData.bookingAdd"></div>
      </div>
      <div v-if="bookingData.persons && bookingData.persons.length > 0" class="cardAddress margin_b16 flex_r_fs_fs">
        <div class="margin_r20 tc_8" style="white-space: nowrap">咨询电话</div>
        <div class="timeContent tc_1 line_h flex_c_fs_c">
          <div class="margin_b4" v-for="(item, index) in bookingData.persons" :key="index">
            <span class="margin_r8">{{ item.name }}</span>
            <a class="phoneNum tc_1" :href="'tel:' + item.mob" @click.stop>{{ item.mob }}</a>
          </div>
        </div>
      </div>
      <div v-if="type === 'big' && bookingData.num" class="peopleNum margin_b16 flex_r_fs_fs">
        <div class="margin_r20 tc_8">随行人数</div>
        <div class="timeContent tc_1" v-text="bookingData.num"></div>
      </div>
      <div v-if="type === 'big' && bookingData.remark" class="other margin_b16 flex_r_fs_fs">
        <div class="margin_r20 tc_8" style="white-space: nowrap">其他备注</div>
        <div class="timeContent tc_1 line_h" v-text="bookingData.remark"></div>
      </div>
    </div>
  </div>
</template>

<script>
import user from '@/api/user'
export default {
  name: 'bookingCard',
  props: {
    bookingData: {
      type: Object,
      default: function () {
        return {}
      }
    },
    type: {
      type: String,
      default: 'small'
    }
  },
  data() {
    return {
      btnAble: true
    }
  },
  methods: {
    cancelBooking(id) {
      if (!this.btnAble) {
        return
      }
      this.btnAble = false
      this.$dialog
        .confirm({
          messageAlign: 'center',
          confirmButtonColor: '#31A2A3',
          message: '请注意, 取消后将无法找回,\n 是否取消该预约? '
        })
        .then(() => {
          // this.$emit('cancelBooking', id)
          this.cancelSingleBooking(id)
        })
        .catch(() => {
          this.btnAble = true
        })
    },
    checkDetails(id) {
      // this.$emit('checkDetails', id)
      this.$router.push({
        path: `/bookingInfo/${id}`
      })
    },
    cancelSingleBooking(id) {
      let _this = this
      user.cancelSingleBooking({id: id}).then((res) => {
        this.btnAble = true
        _this.$emit('reload')
        this.$toast.success({
          message: '取消成功',
          onClose: function () {
            // this.btnAble = true
            // _this.$emit('reload')
          }
        })
      })
      // this.btnAble = true
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.bookingCard {
  padding: 2rem;
  box-sizing: border-box;
  margin-bottom: 1.6rem;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
  .cardTop {
    margin-bottom: 2.2rem;
    .cardImg {
      overflow: hidden;
    }
    .topName {
      width: 14rem;
      line-height: 1.8rem;
    }
    .cancelBtn {
      height: 2.4rem;
      line-height: 2.4rem;
      text-align: center;
      border: 0.1rem solid #01847f;
      padding: 0 0.6rem;
      box-sizing: border-box;
    }
  }
}
.phoneNum {
  text-decoration: none;
}
.line_h {
  line-height: 1.6rem;
}
.audit {
  color: #ff2727;
}
.approved {
  color: #9c9c9c;
}
</style>
